
body {
    margin: 0;
}

.div-master-container {   
}

.div-head-bar {
    background: linear-gradient(to bottom, rgb(252, 252, 252) 27%,rgb(221, 221, 221) 97%);
    border-bottom: rgb(243, 243, 243) solid 1px;
    box-shadow: 0px 0px 20px 0px rgba(124, 124, 124, 0.92);
    height: 35px;
    position: fixed;
    width: 100%;
    z-index: 150;
}

#div-address-bar {
    display: inline;
    border-right: 1px solid rgb(211, 211, 211);
    float: left;
    height: 30px;
    position: relative;
    top: 2.5px;
}

.div-home {
    border-radius:  3px 3px 3px 3px;
    cursor: pointer;
    float: left;
    margin-left: 40px;
    width: 30px;
}
/*
.div-home:hover {
    background-color: rgb(245,245,245);
    box-shadow: 1px 1px 1px 0px rgba(90,90,90,1);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(230,230,230,1) 100%);
}
*/

#div-home-icon {
    background: url("/images/home.png") no-repeat;
    background-size:   contain; 
    height: 23px;
    left: 5px;
    position: relative;
    top: 3px;
    vertical-align: middle;
    width: 30px;
    -webkit-filter: drop-shadow(2px 2px 0px #FFF);
}
#div-home-icon:hover {
    background: url("/images/home-hglt.png") no-repeat;
    background-size:   contain;     
}

#div-ad-bar-elmts-container {
    float: left;
    height: 30px;
    overflow: hidden;
}

.div-ad-bar-element {
    float: left;
    height: 30px;
}

.div-ad-bar-seperator {
    float: left;
    height: 30px;
    margin-left: 5px;
    width: 15px;
}

.span-ad-bar-seperator {
    color: rgba(45, 45, 45, 0.5);
    cursor: default;
    font-size: .8em;
    position: relative;
    text-shadow: 1px 1px 0 rgb(255, 255, 255);
    top: 9px;
}

.div-ad-bar-folder {
    float: left;
    height: 30px;
    margin-left: 3px;
    margin-right: 3px;
}

.span-ad-bar-folder {
    color: rgba(36, 36, 36, 0.8);
    cursor: pointer;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: .8em;
    font-weight: 700;
    max-width: 200px;
    min-width: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 0 rgb(255, 255, 255);
    position: relative;
    top: 11px;
    white-space: nowrap;
}
.span-ad-bar-folder:hover {
    color: rgba(5, 77, 206, 0.8);
}

#div-power-button {
    float: right;
    margin-right: 6px;    
    position: relative;
    top: 10px;
}

#img-power-button {
    background: url("/images/power-button.png") no-repeat; 
    background-size:   contain;
    height: 17px;
    width: 17px;
    -webkit-filter: drop-shadow(2px 2px 0px #FFF);
}
#img-power-button:hover {
    background: url("/images/power-button-highlight.png") no-repeat;
    background-size:   contain;
}    

.div-contents {
    bottom: 0;
    left: 0;
    overflow: auto;
    padding-bottom: 15px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    position: absolute;
    right: 0;
    top: 35px;    
}

.div-thumbnail {
    /*border:  1px solid rgba(255,255,255,0); /*to make border transparent*/
    border-radius:  8px 8px 8px 8px;
    cursor: pointer;
    float: left;
    height: 130px;
    margin: 15px;   
    transition: background-color .6s ease;
    width: 110px;
    -moz-border-radius:  8px 8px 8px 8px;
    -webkit-border-radius:  8px 8px 8px 8px;

}

.div-thumbnail:hover {
    background-color: rgba(234, 241, 253, 0.7);
}


.div-thumbnail-droppable {   /*to hightilgh when an element is dragged over to the icon*/
    background-color: rgba(185, 208, 248, 0.7);
    border-radius:  8px 8px 8px 8px;
    float: left;
    height: 130px;
    margin: 15px;   
    width: 110px;
    -moz-border-radius:  8px 8px 8px 8px;
    -webkit-border-radius:  8px 8px 8px 8px;   
}

.div-thumbnail-icon {
    border:  0px;
    height: 105px;
    text-align: center;
    width: 108px;
    
}


.img-thumbnail-folder-icon {
    height:  110px;
    width:  96px;
    -webkit-filter: drop-shadow(1px 1px 2px #555);
}

.img-thumbnail-file-icon {
    height:  110px; 
    width:  107px;
    -webkit-filter: drop-shadow(1px 1px 2px #555);
}

.div-thumbnail-desc {
    margin-top: 5px;
    text-align: center;
}

.span-thumbnail-desc {
    color: rgb(20, 20, 20);
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: .85em;
    height: 20px;
    overflow: hidden;
    text-align: center;
    text-overflow:  ellipsis;  /* for dotted lines to indicated hidden text*/
    width: 108px;    
    white-space: nowrap;
}

.div-favicon {
    bottom: 30px;
    height: 24px;
    position: absolute;
    right: 10px;    
    width: 24px;
    -webkit-filter: drop-shadow(0px 0px 2px #555);
}

#ul-wspace-right-click-menu {
    box-shadow: 1px 1px 5px 0px rgb(124, 124, 124);
    position: fixed;
    display: none;
    width: 120px;
}

#ul-icon-right-click-menu {
    box-shadow: 1px 1px 5px 0px rgb(124, 124, 124);
    position: fixed;
    display: none;
    width: 120px;
}


.ui-menu {
    width: 110px;
}

#tbox-icon-rename{
    text-align: center;
    width: 100px;
    height: 14px;    
}
